<template>
  <div style="background-color: #f5f5f5;height:515px">

    <div style="display: flex" >
      <div>
        <div >
          <div>&nbsp;</div>
          <div style="display: flex;justify-content:space-between;background-color:#ffffff;">
            <h1>我的好友&emsp;</h1>
            <el-button type="primary" @click="add()">新增</el-button>
          </div>
          <table width="990px" bgcolor="#ffffff">
            <tr>
              <el-table :data="dataList">
                <el-table-column
                  prop="id"
                  label="好友ID"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="age"
                  label="年龄"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="sex"
                  label="性别"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="note"
                  label="备注"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                  <template slot-scope="scope">
                    <el-button type="default" icon="el-icon-edit" @click="addOrUpdate(scope.row.id)">修改</el-button>
                    <el-button type="default" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </tr>
         </table>
        </div>
      </div>
    </div>
    <add-or-update
      v-if="addFriendVisible"
      ref="addFriend"
      @refreshDataList="refreshDataList"
    ></add-or-update>
    </div>
</template>
<script>
import { delFriend } from '@/api/friend';
import { $gc } from 'gc-starter-ui-plus'
import addOrUpdate from "./addFriend";

export default {
  name: "Friends",
  components: { addOrUpdate},
  mixins: [$gc.mixins.pageMixins],
  data() {
    return {
      dataListLoading: false,
      loadingText: "",
      addFriendVisible: false,
      // 表单查询
      queryForm: {
        searchKey: "",
      },
      // 表格数据
      dataList: [],
      // dataForm: {
      //   // id: undefined,
      //   name:'',//姓名
      //   age:'',//年龄
      //   sex:'',//性别
      //   note:'',//备注
      // },
      // totalCount: 0,
    };
  },
  mounted() {
    // this.size = 10;
    this.getDataList();
  },
  methods: {
    // 查询事件
    handleSearch() {
      // 一定要加上这个，否则会出现查询不到结果的情况
      this.current = 1
      this.getDataList()
    },
    getDataList() {
        this.$get("/friend/", {
        current: this.current,
        size: this.size,
        //searchKey: this.queryForm.searchKey || "",
      }).then((data) => {
        this.dataList = data.list;
        this.totalCount = data.totalCount;
        console.log(this.dataList)
        console.log(this.totalCount)
      });
    },
    
    // 新增或者修改
    add() {
        this.addFriendVisible = true;
        this.$nextTick(() => {
        this.$refs["addFriend"].init();
      });
    },
    addOrUpdate(id) {
      this.friendFormVisible = true
      this.$nextTick(() => {
        this.$refs['addFriend'].init(id)
      })
    },
    handleDelete(id) {
      this.$confirm(`确定进行删除操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delFriend(id).then(data => {
          this.$message.success('删除成功')
          this.getDataList()
        }).catch(e => {
          this.$message.success(e.msg)
        })
      }).catch(() => {
      })
    }

  },
};
</script>
